<style>
  #dynamic {
    margin-bottom: 10px;
  }

  #dynamic .dynamic {
    background-color: #fff;
    margin-bottom: 10px;
  }

  #dynamic .mu-card-header .mu-avatar {
    width: 40px;
    height: 40px;
    margin-right: 6px;
    margin-top: -7px;
  }

  #dynamic .mu-card-header-title .mu-card-title {
    font-size: 16px;
    margin-top: -5px;
  }

  #dynamic .mu-card-header-title .mu-card-sub-title {
    font-size: 12px;
    margin-top: 6px;
  }

  #dynamic .mu-card-title-container {
    padding: 0px;
  }

  #dynamic .mu-card-text {
    font-size: 15px;
    line-height: 18px;
    margin-top: -24px;
    padding-top: 13px;
    padding-bottom: 8px;
  }

  #dynamic .mu-card-actions {
    border-top: 1px solid #F1F1F5;
    border-bottom: 1px solid #F1F1F5;
    padding: 0px;
  }

  #dynamic .mu-card-media > video, #dynamic .mu-card-media > audio {
    margin-left: 10px;
  }

  #dynamic .flex-item {
    text-align: center;
    padding: 0px;
    border-right: 1px solid #F1F1F5;
  }

  #dynamic .flex-item .iconfont {
    font-size: 20px;
    padding-top: 3px;
  }

  #dynamic .comNum, #dynamic .supNum, #dynamic .supNum1 {
    font-size: 15px;
    display: inline-block;
    margin-left: 3px;
    margin-top: 2px;
    /*padding-top: 10px;*/
  }

  #dynamic .supNum {
    margin-top: 5px;
  }

  #dynamic .flex-item .iconfont.icon-mess {
    font-size: 19px;
  }

  #dynamic .flex-item .iconfont.icon-heart {
    font-size: 14px;
  }

  #dynamic .flex-item .iconfont.icon-heart1 {
    color: #F98700;
    margin-top: 2px;
    /*padding-top: 2px;*/
  }

  #dynamic figure {
    display: inline-block;
  }

  #dynamic .content-img {
    /*display: inline-block;*/
    /*width: 33%;*/
    margin-left: 10px;
    margin-bottom: 35px;
    /*padding: 8px;*/
    /*margin-right: 1.33%;*/
    /*position: relative;*/
  }

  #dynamic .content-img img {
    object-fit: cover;
  }

  #dynamic .mu-row {
    margin-left: 10px;
    margin-right: 10px;
  }

  #dynamic .mu-col {
    padding-bottom: 8px;
  }

  #dynamic .comDetail {
    background-color: #fff;
    padding-left: 5px;
    margin-top: 10px;
    /*padding-top: 10px;*/
  }

  #dynamic .comDetail > div {
    padding-bottom: 10px;
    padding-left: 10px;
  }

  /*#dynamic .arcile {
    background-color: #
  }*/
  #dynamic .title {
    font-size: 16px;
    color: #000;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 8px;
  }

  #dynamic .delete {
    display: inline-block;
    color: #FA952A;
    font-size: 15px;
    position: relative;
    left: -85px;
    top: -5px;
  }

  #dynamic .delete.deleteAn {
    left: -25%;
  }

  #dynamic .topmarkOne {
    display: inline-block;
    position: relative;
    top: 3px;
  }

  #dynamic .topmarkTwo {
    margin-bottom: 4px;
  }

  #dynamic .dyncon {
    display: inline-block;
    /*margin-left: -10px;*/
  }

  #dynamic .video-js.vjs-custom-skin {
    height: 240px;
  }

  .comdia {
    background-color: #fff;
    line-height: 50px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: translate3d(0, 0, 0);
    /*z-index: 9111289;*/
  }

  .comdia > .mu-dialog {
    box-shadow: none;
    height: 100%;
  }

  .comdia.border_bottom {
    border-bottom: 1px solid #929292;
  }

  .comdia .comdiaBody {
    padding: 0px;
    height: 100%;
  }

  .comdia .header-right-img {
    width: 50px;
  }

  .comdia .header-content {
    text-align: center;
    font-size: 1.6rem;
  }

  .comdia .mu-flat-button {
    position: relative;
    top: 8px;
    left: -15px;
    font-size: 16px;
  }

  .comdia .mu-raised-button.disSend {
    position: relative;
    top: 10px;
    right: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 13px;
    background-color: #F7F7F7;
    border: solid 1px #C0C0C0;
  }

  .comdia .mu-raised-button.send {
    position: relative;
    top: 10px;
    right: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 13px;
    background-color: #F98700;
    color: #fff;
  }

  .comdia .left {
    padding-left: 10px;
  }

  .comdia .content {
    background-color: #fff;
  }

  .comdia .content textarea {
    padding: 10px;
    font-size: 16px;
    line-height: 24px;
    border: none;
    resize: none;
    outline: none;
    overflow: auto;
    width: 100%;
    height: 500px;
  }

  .comdia .content textarea.active {
    border: none;
  }

  .comdia .content textarea.focus {
    border: none;
  }

  .imgBody-dialog .mu-dialog-body {
    padding: 0px;
    text-align: center;
    max-height: 750px;
  }

  .imgBody-dialog .imgBody {
    color: #fff;
    padding: 15px;
    text-align: left;
    margin-left: 5px;
  }

  .imgBody-dialog, .imgBody-dialog .mu-dialog, imgBody-dialog .mu-dialog .mu-dialog-body {
    width: 100%;
    height: 100%;
    background: #000;
  }

  .imgBody-dialog img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  #dynamic .my-gallery img {
    vertical-align: middle;
    text-align: center;
    display: table-cell;
  }

  #dynamic .modelAudioBg {
    width: 100%;
    height: 45px;
    position: absolute;
    bottom: 0px;
    /*left: 7%;*/
    background-color: #fff;
  }

  #dynamic .modelAudioBg label {
    position: relative;
    top: -18px;
    /*left: 5px;*/
  }

  #dynamic .modelAudio {
    display: inline-block;
    width: 60%;
    height: 35px;
    margin-top: 5px;
    margin-left: 15px;
    border: solid 1px #F98700;
    border-radius: 5px;
  }

  #dynamic .playAu, #dynamic .pauseAu {
    margin-top: 5px;
  }

  #dynamic .modelAudio img {
    /*display: inline-block;*/
    margin-left: 100px;
    margin-bottom: 3px;
  }

  #dynamic .isShowAudioError {
    width: 100%;
    height: 45px;
    background-color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
    position: absolute;
    bottom: 0px;
  }

  #dynamic .isShowAudioError div {
    padding-top: 15px;
    text-align: center;
    color: #fff;
    font-size: 1.3em;
  }
</style>
<template>
  <div id="dynamic">
    <model :isShow="isShow" v-on:closeIsModel="deleteDyn" title=" ">
      确定删除该动态?
    </model>
    <div class="dynamic">
      <div>
        <!--用户头像和名称-->
        <mu-card-header v-tap="{methods: checkDetail, id: dynamicData.id, name: nickName}"
                        :title="dynamicData.fleet ? dynamicData.fleet.name : dynamicData.member.nickname"
                        :subTitle="dynamicData.publishDate | sliceDate">
          <mu-avatar
            :src="addPath((dynamicData.fleet ? dynamicData.fleet.head : dynamicData.member.head)) || defaultImg"
            slot="avatar"/>
          <div v-show="dynamicData.member && dynamicData.member.nickname == nickName"
               v-tap="{methods: deleteDyn, id: dynamicData.id}" class="delete" v-bind:class="{deleteAn: isAndroid}">删除
          </div>
        </mu-card-header>
        <mu-card-title/>

        <!--动态内容-->
        <mu-card-text v-show="dynamicData.spaceType === '0'">
          <div class="topmarkOne" v-show="dynamicData.isTop == 'true'"><img src="../assets/top.png" width="40px"
                                                                            height="17px"/></div>
          <div class="dyncon">
            <span v-show="dynamicData.topics.length > 0" v-for="item in dynamicData.topics"
                  style="color: #F98700;">#{{item.content}}#</span>
            <span v-html="dynamicData.content"></span>
          </div>
          <!--<div class="dyncon">{{ dynamicData.content}}</div>-->
        </mu-card-text>
        <!--动态文章-->
        <mu-card-text v-show="dynamicData.spaceType === '1'"
                      v-tap="{methods: checkDetail, id: dynamicData.id, name: nickName}">
          <div class="topmarkTwo" v-show="dynamicData.isTop == 'true'"><img src="../assets/top.png" width="40px"
                                                                            height="17px"/></div>
          <mu-row gutter>
            <mu-col width="20">
              <img :src="dynamicData.share.image ? addPath(dynamicData.share.image) : defaultImg" width="100%"/>
            </mu-col>
            <mu-col width="80" class="arcile">
              <div class="title">{{ dynamicData.share.title }}</div>
              <div class="content">{{ dynamicData.share.content }}</div>
            </mu-col>
          </mu-row>
        </mu-card-text>
        <mu-card-media>
          <!--动态图片-->
          <div layout layout-align="start center" layout-wrap="wrap">
            <div class="my-gallery" :data-pswp-uid="index + 1">
              <figure v-for="(img, index) in dynamicData.images">
                <div :style="{width: imgHeight + 'px', height: imgHeight + 'px', overflow: 'hidden'}"
                     class="content-img img-container">
                  <img :src="addPath(img)" :width="imgWidth" :height="imgWidth"
                       @click="openPhoto(dynamicData.images, index)">
                </div>
              </figure>
            </div>
          </div>
          <!--动态视频-->
          <video-player :options="playerOptions"
                        ref="videoPlayer"
                        @play="onPlayerPlay($event)"
                        v-if="dynamicData.videos && dynamicData.videos.length > 0"
          >
          </video-player>
          <audio width="50%" :id="'audio' + this.dynamicData.id" controls
                 v-if="dynamicData.audios && dynamicData.audios.length > 0" @play="onPlayerPlay($event)"
                 @pause="onPlayerPause($event)"
                 :src="addPath(dynamicData.audios[0])"
                 >
           <!--  <source width="100%" > -->
            <!--<source width="100%" :src="dynamicData.audios[0]">-->
          </audio>
          <div class="modelAudioBg" v-if="dynamicData.audios && dynamicData.audios.length > 0">
            <div class="modelAudio">
              <mu-icon class="playAu" value="play_arrow" color="#F98700" v-if="isStart" @click="playAudio()"/>
              <mu-icon class="pauseAu" value="pause" color="#F98700" v-if="!isStart" @click="pauseAudioByClick"/>
              <img :src="vol" alt="" width="40px" v-for="vol, index in volumeArr" v-show="index == showVol">
            </div>
            <label for="">{{ timeLongM }}'{{ timeLongS }}''</label>
          </div>
          <div class="isShowAudioError" v-if="isShowAudioError">
            <div>无法找到此音频兼容的源</div>
          </div>
        </mu-card-media>
      </div>
      <mu-card-actions>
        <mu-flexbox>
          <mu-flexbox-item class="flex-item">
            <!--动态评论-->
            <mu-flat-button id="comment" @click="open($event)">
              <i class="iconfont icon-mess"></i>
              <span class="comNum">{{ dynamicData.commentCount }}</span>
            </mu-flat-button>
          </mu-flexbox-item>
          <mu-flexbox-item class="flex-item">
            <!--动态点赞-->
            <mu-flat-button id="support" v-if="dynamicData.isSupport === '0'" @click.stop="support(dynamicData)">
              <i class="iconfont icon-heart"></i>
              <span class="supNum">{{ dynamicData.supportCount }}</span>
            </mu-flat-button>
            <mu-flat-button id="support" v-if="dynamicData.isSupport === '1'" @click.stop="support(dynamicData)">
              <i class="iconfont icon-heart1"></i>
              <span class="supNum1">{{ dynamicData.supportCount }}</span>
            </mu-flat-button>
          </mu-flexbox-item>
        </mu-flexbox>
        <mu-flexbox v-if="dynamicData.comments&&dynamicData.comments.length>0" orient="vertical" style="background: #f2f2f2; width:calc(100% - 30px); margin: 10px 15px; padding: 10px 15px;">
          <div v-for="(item,index) in dynamicData.comments" v-if="index < 3" style="width: 100%; text-align: left; line-height: 150%; margin: 5px 0">
            <span class="nickname" style="color: #F98700;">{{ item.member.nickname }} :</span>
            <span v-html="item.content"></span>
          </div>
          <div style="width: 100%; text-align: center; line-height: 150%; margin: 5px 0">
            <span class="nickname" v-if="dynamicData.comments&&dynamicData.comments.length>3" style="color: #F98700;" v-tap="{methods: checkDetail, id: dynamicData.id, name: nickName}">查看全部评论</span>
          </div>
        </mu-flexbox>
      </mu-card-actions>
      <!--</mu-card>-->
    </div>
    <!--评论弹窗-->
    <mu-dialog id="comdialog" dialogClass="comdia" bodyClass="comdiaBody" :open="dialog" @close="close">
      <form>
        <div slot="title" layout="row" layout-align="center baseline " class="header-bar border_bottom">
          <div layout="row" layout-align="flex-start center" class="header-right-img left">
            <mu-flat-button label="取消" @click="close"/>
          </div>
          <div flex class="header-content">
            评论
            <slot name="center"></slot>
          </div>
          <div v-if="comcon.length == 0" class="header-right-img" layout-align="flex-end center" layout="row"
               flex="nogrow">
            <slot name="right"></slot>
            <mu-raised-button class="disSend" label="发送" disabled/>
          </div>
          <div class="header-right-img" layout-align="flex-end center" layout="row" flex="nogrow" v-else>
            <slot name="right"></slot>
            <mu-raised-button @click="submit" class="send" label="发送"/>
          </div>
        </div>
        <div flex="grow" class="content" slot="default">
          <textarea v-model="comcon" placeholder="说点什么吧"></textarea>
        </div>
      </form>
    </mu-dialog>
  </div>
</template>
<script>

  import model from 'components/model'
//vfac image
import vfacDefault from "assets/default_user_icon.png";
//vfhz image
//服务器图片 
import imagesServices from "services/getImage/getImage"
  import volume1 from 'assets/volume1.png'
  import volume2 from 'assets/volume2.png'
  import volume3 from 'assets/volume3.png'
  import volume4 from 'assets/volume4.png'
  import '../css/default-skin.css'
  import '../css/photoswipe.css'

  let dynId
  let scrollTop
  export default {
    data () {
      return {
        defaultImg:'',
        isShow: false,
        screenWidth: window.screen.width,
        screenHeight: window.screen.height,
        imgSrc: '',
        dialog: false,
        comcon: '',
        playerOptions: {
          start: 0,
          playsinline: false,
          muted: true,
          language: 'zh-CN',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            src: '',
            type: ''
          }],
          poster: defaultImg
        },
        isShowAudioError: false,
        volumeArr: [volume1, volume2, volume3, volume4], // 音量图片
        showVol: 0,
        timeLong: 0,
        timeLongM: 0,
        timeLongS: 0,
        timeBack: null,
        auPlayVol: null,
        audiosDom: null,
        isPauseBySelf: true
      }
    },

    computed: {
      imgWidth () {
        let width = (this.screenWidth - 28) * 0.33 - 4
        return width
      },
      imgHeight () {
        return this.imgWidth
      },
      player () {
        return this.$refs.videoPlayer.player
      },
      isStart () {
        return this.status
      }
    },
    props: {
      dynamicData: {
        type: Object
      },
      index: {
        type: Number
      },
      nickName: {
        type: String
      },
      ele: null,
      status: Boolean
    },
    filters: {
      sliceDate: function (value) {
        if (!value) return ''
        return value.slice(5, 10)
      }
    },
    watch: {
      isStart (newVal, oldVal) {
        if (this.dynamicData.audios && this.dynamicData.audios.length > 0) {
          let dom = this.audiosDom
          console.log(dom)
          if (newVal && !this.isPauseBySelf) {
            this.pauseAudio()
          }
        }
      }
    },
    methods: {
      // 删除自己发布的动态
      deleteDynamic (params) {
        return this.$.get({
          methodName: 'DeleteSpace',
          ids: [params.id]
        }).then(resp => {
          if (resp.data.resultCode === '100') {
            this.$emit('deleteDyn', this.index)
          }
        })
      },
      deleteDyn (params) {
        if (params && params.id) {
          dynId = params.id
          this.isShow = true
        }
        if (params === 'true') {
          this.isShow = false
          this.deleteDynamic({
            id: dynId
          })
        }
        if (!params) {
          this.isShow = false
        }
      },
      // 查看动态详情
      checkDetail (params) {
        this.$router.push({
          name: 'dynamic_detail',
          params: {
            dynamicId: params.id,
            usernickName: params.name
          }
        })
      },
      // 对动态点赞
      changeSupport () {
        return this.$.get({
          methodName: 'CreateSpaceSupport',
          spaceId: this.dynamicData.id,
          loading:'false'
        })
      },
      // 打开评论弹窗
      open (e) {
        e.preventDefault()
        this.comcon = ''
        this.dialog = true
        // document.getElementById('comdialog').on('touchmove', (e) => {
        //   e.preventDefault()
        // })
      },
      // 关闭评论弹窗
      close () {
        this.dialog = false
      },
      // 提交评论表单
      submit () {
        this.$.get({
          methodName: 'CreateSpaceComment',
          content: this.comcon,
          spaceId: this.dynamicData.id
        }).then(resp => {
          if (resp.data.resultCode === '100') {
            this.dialog = false
            let queryData = {
              member: {
                nickname: this.nickName
              },
              content: this.comcon
            }
            this.dynamicData.commentCount++
            this.dynamicData.comments.push(queryData)
          }
        })
      },
      // 点赞触发页面字体图标和数量变化
      support (dynamicData) {
        if (dynamicData.isSupport === '0') {
          this.changeSupport().then(resp => {
            if (resp.data.resultCode === '100') {
              dynamicData.isSupport = '1'
              dynamicData.supportCount++
            }
          })
        }
        if (dynamicData.isSupport === '1') {
          this.changeSupport().then(resp => {
            if (resp.data.resultCode === '100') {
              dynamicData.isSupport = '0'
              dynamicData.supportCount--
            }
          })
        }
      },
      onPlayerPlay (e) {
        let videos = Array.from(document.getElementsByTagName('video'))
        let audios = Array.from(document.getElementsByTagName('audio'))
        // 如果播放的是视频
        if (e.el_) {
          this.$emit('play', this.index, 'play')
          let eleId = e.el_.id + '_html5_api'
          let playVideo = document.getElementById(eleId)
          videos.forEach(video => {
            if (playVideo !== video) {
              video.pause()
            }
          })
        }
        // 如果播放的是音频
        if (e.target) {
          videos.forEach(video => {
            video.pause()
          })
          this.$emit('play', this.index, 'play')
          this.auPlayVol = setInterval(() => {
            this.showVol++
            if (this.showVol == 3) {
              this.showVol = 0
            }
          }, 500)
          function timeFun (vm) {
            vm.timeLong--
            vm.timeLongM = parseInt(vm.timeLong / 60)
            vm.timeLongS = parseInt(vm.timeLong % 60)
            if (vm.timeLong < 1) {
              clearTimeout(vm.timeBack)
              vm.pauseAudio()
              clearTimeout(vm.auPlayVol)
              vm.timeLong = vm.audiosDom.duration
              vm.timeLongM = parseInt(vm.timeLong / 60)
              vm.timeLongS = parseInt(vm.timeLong % 60)
            }
          }

          this.timeBack = setInterval(() => {
            timeFun(this)
          }, 1000)
        }
      },
      onPlayerPause () {
        this.$emit('play', this.index, 'pause')
      },
      // 音频开始播放
      playAudio () {
        this.isPauseBySelf = false
        this.audiosDom.play()
      },
      // 音频暂停播放
      pauseAudio () {
        this.audiosDom.pause()
        clearTimeout(this.timeBack)
        clearTimeout(this.auPlayVol)
        this.timeBack = null
        this.auPlayVol = null
      },
      pauseAudioByClick () {
        this.isPauseBySelf = true
        this.pauseAudio()
      },
      getDynamicScroll () {
        // let scrollY = window.scrollY || document.documentElement.scrollTop
        let dom = document.getElementsByClassName('scroll-box')
        window.localStorage.setItem('dynSetTop', dom[0].scrollTop)
      },
      // 查看图片
      openPhoto (value, index) {
        this.getDynamicScroll()
        this.$router.push({
          name: 'big_images',
          params: {
            images: value,
            index: index
          }
        })
      }
    },
    components: {
      model
    },
    created(){
      alert(this.$.appname)
      if(this.$.appname === 'cn.carowl.vfuhuizhong'){
        imagesServices.bind(this)({},res=>{
          this.defaultImg = res.data.newLogo
        })
      }else{
        this.defaultImg = vfacDefault
      }
    },
    beforeCreate () {
      alert(this.$.appname)
      if(this.$.appname === 'cn.carowl.vfuhuizhong'){
        imagesServices.bind(this)({},res=>{
          this.defaultImg = res.data.newLogo
        })
      }else{
        this.defaultImg = vfacDefault
      }
      let u = navigator.userAgent
      this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
      this.isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    },
    mounted () {
      /* eslint-disable */
      // 获取音频时长

        let id = 'audio' + this.dynamicData.id
        let dom = document.getElementById(id)
        if (dom) {
          this.timeLong = 0
          // this.isShowAudioError = true
          this.audiosDom = dom
          dom.setAttribute("autoplay","autoplay")//自动播放获取属性

          dom.addEventListener("loadeddata", () => {
            this.timeLong = dom.duration
            this.timeLongM = parseInt(this.timeLong / 60)
            this.timeLongS = parseInt(this.timeLong % 60)
            this.isShowAudioError = false
          })
        }

      // 获取视频资源
      setTimeout(() => {
        this.playerOptions.muted = false
      }, 2000)
      if (this.dynamicData.videos.length > 0) {
        let element = this.dynamicData.videos[0]
        this.playerOptions.sources[0].src = this.addPath(element)
        this.playerOptions.sources[0].type = 'video/' + element.split('.')[1]
      }
    },
    activated () {
      alert(this.$.appname)
      
      const scrollY = window.localStorage.getItem('dynSetTop')
      if (scrollY) {
        let dom = document.getElementsByClassName('scroll-box')
        dom[0].scrollTop = Number(scrollY)
        this.$nextTick(() => {
          window.localStorage.setItem('dynSetTop', null)
        })
      }
    },
    deactivated  () {
      this.pauseAudio()
    }
  }
</script>
